{% extends 'mybase2.html' %}

{% block title %} 
    {% if user %}
        {{ user.username}} 博客首页 
    {% endif %}
  
{% endblock %}

{% block style %} 
    {{ super() }}
    <style>
        .search_div {
            display: grid;
            grid-template-columns: auto auto auto;
            align-items: center; 
            line-height: 30px;
        }

        #search {
            display: inline-block;
            width: 200px;
            height: 20px;
            border-radius: 5px;
            vertical-align: middle;
        }
        #search_btn {
            display: inline-block;
            width: 50px;
            height: 20px;
            background-color: green;
            border-radius: 5px;
            vertical-align: middle;
        }
        .header-a{
            margin-right: 10px;
            font-size:larger;
            color: green;
        }

        #container {
            width:80%;
            margin: 0 auto;
            text-align: center;
        }

        .article {
            width:80%;
            background-color: darkseagreen;
            height: 100px;
            margin-bottom: 20px;
            border-bottom: 1px solid gray;
        
            margin: 0 auto;
        }
    </style>
{% endblock %}

{% block content %}
    {#
    <div id="container">
        <h1>我是博客首页</h1>
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>
        <div class="article"></div>

         {% if user %}
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">序号</th>
                        <th scope="col">用户名</th>
                        <th scope="col">手机号码</th>
                        <th scope="col">注册时间</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>

                <tbody>
                
                    <tr>
                        <th scope="row">1</th>
                        <td >{{ user.username }}</td>
                        <td >{{ user.phone }}</td>
                        <td >{{ user.rdatetime }}</td>
                        <td ><a href="{{ url_for('user.change')}}?id={{user.id}}">更新</a>|
                            <a href="{{ url_for('user.delete')}}?id={{user.id}}">删除</a></td>
                    </tr>
                   
                
                    
                </tbody>
            </table>
         {% endif %}

    </div>
    #}

{# 
    <div style="text-align: center;">
        <a class="header-a" href="{{ url_for('user.user_center') }}" >首页</a>
        <a class="header-a" href="{{ url_for('article.all_article') }}">文章</a>
        <a class="header-a" href="{{ url_for('user.register') }}" >注册</a>
        <a class="header-a" href="{{ url_for('user.login') }}">登录</a>
        <a class="header-a" href="{{ url_for('user.logout') }}" >退出</a>
    </div>

<div style="text-align:center">
    <h1>所有用户信息如下</h1>
    <div id="search_div">
        <label>搜索:</label>
        <input type="text" name="search" id="search" placeholder="请输入用户名或者手机号码">
        <input type="button" value="搜索" id="search_btn">
    </div>
  
    <hr>
    {% if users %}
        <table border="1" cellspacing="0" cellpadding="5" width="50%" style="text-align:center;margin:0 auto">
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>手机号码</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
            {% for user in users %}
                <tr>
                    <td>{{loop.index}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.phone}}</td>
                    <td>{{user.rdatetime}}</td>
                    <td><a href="{{ url_for('user.update')}}?id={{user.id}}">更新</a>|
                        <a href="{{ url_for('user.delete')}}?id={{user.id}}">删除</a></td>
                </tr>
            {%endfor%}

        </table>
    {% else %}
        <p style="color:red;font-size:20px">当前还没有任何用户,抓紧时间注册吧!!</p>
    {% endif %}
</div>
     #}

{% endblock %}


{% block script %} 
    {{ super() }}
    <script>
        $(document).ready(function() {
            $('#search_btn').click(function() {
                var search_value = $('#search').val(); // 方式1：获取输入框的值
                var search_value2 = $("input[name='search']").val(); // 方式2： 获取输入框的值
                // console.log(search_value2)

                location.method = "get";
                // http://127.0.0.1:5000/user/search?search=xxx
                location.href = "{{ url_for('user.search') }}?search_value=" + search_value;
            });
        });
    </script>
{% endblock %}

